<template>
	<view class="content">
	    <MovieItem  :movie="movie" v-for="movie in curMovies" :key="movie.id"></MovieItem>
		
	</view>
</template>

<script>
	// 导入电影数据 
	import data from "../../data/movie.json"
	// 导入组件
	import MovieItem from "./MovieItem.vue";
	// 导入工具函数 
	import { loading } from "../../utils/tools";
	export default {
		data() {
			return {
				movies:[],// 加载全部的电影
				curMovies:[], // 当前的电影
				page:1, // 当前页
				size:10,  // 每页多少条数据
				totalPage:1 // 总页数
				
			}
		},
		components:{
			MovieItem
		},
		
		onLoad() {
			this.movies = data.movie.subjects;
			const total = this.movies.length;
			this.totalPage =Math.ceil(total/this.size) ;
			this.loadData()
		},
		// 上拉加载的生命周期
		onReachBottom() {
		    if(this.page >= this.totalPage) {
				uni.showToast({
					title:"已经到底了...."
				})
				return;
			}
			// console.log("我已经拉倒底了,准备加载下一页数据....");
		   this.page++
		   this.loadData()
		},
		// 下拉刷新的生命周期
		onPullDownRefresh() {
			 this.page=1
			 this.curMovies = []
			 this.loadData()
		},
		
		methods: {
			// 加载当前的数据
			async loadData() {
				uni.showLoading({
					title:`正在加载${this.page}页`,
					mask:true
				})
				await loading(200)
				// page size
				const startNo = (this.page - 1) * this.size
				const endNo =  startNo + this.size
				this.curMovies = [...this.curMovies,...this.movies.slice(startNo,endNo)]
				// 关闭下拉刷新
				uni.stopPullDownRefresh()
				uni.hideLoading()
			}
		}
	}
</script>

<style scoped>

</style>
